<template>
  <div id="app">
    <header class="head">
      <a class="back tl" href="javascript:history.back(-1)">
        <i class="el-icon-arrow-left"></i>
      </a>
      <a href="javascript:;" class="tc">
        <small class="font_18 co_f">从业人员</small>
      </a>
      <a class="operation" v-on:click="show = !show" v-show="operation">
        <i class="el-icon-setting"></i> 操作
      </a>
      <a href="javascript:;" class="save" v-show="save">
        <button @click="submitForm()" type="primary">保存</button>
      </a>
      <!--dialog-->
      <transition name="fade">
        <div class="operatbox" v-show="show">
          <a @click="update()">修改</a>
          <a @click="handleDelete()">删除</a>
        </div>
      </transition>
    </header>
  
    <main>
      <div class="formcontent">
        <ul>
          <li>
            <span>头像</span>
            <div class="froms">
               <div class="imgbox">
                  <img :src="listData.pictureFile.serverFullPath">
               </div>
            </div>
          </li>
          <li>
            <span><em>*</em>姓名</span>
            <div class="froms">
              <input v-model="listData.name" :disabled="forbidden">
            </div>
          </li>
          <li>
            <span><em>*</em>性别</span>
            <div class="froms">
              <el-radio class="radio" v-model="listData.sex" label="1" :disabled="forbidden">男</el-radio>
              <el-radio class="radio" v-model="listData.sex" label="2" :disabled="forbidden">女</el-radio>
            </div>
          </li>
          <li>
            <span>年龄</span>
            <div class="froms">
              <input v-model="listData.age" :disabled="forbidden">
            </div>
          </li>
          <li>
            <span>编号</span>
            <div class="froms">
              <input v-model="listData.serialNumber" :disabled="forbidden">
            </div>
          </li>
          <li>
            <span>工种</span>
            <div class="froms">
              <input v-model="listData.workType" :disabled="forbidden">
            </div>
          </li>
          <li>
            <span>身份证号</span>
            <div class="froms">
              <input v-model="listData.idCard" :disabled="forbidden">
            </div>
          </li>
          <li>
            <span>身份证号</span>
            <div class="froms">
              <input v-model="listData.phone" :disabled="forbidden">
            </div>
          </li>
          <li>
            <span><em>*</em>体检情况</span>
            <div class="froms">
              <el-radio class="radio" v-model="listData.health" label="1" :disabled="forbidden">合格</el-radio>
              <el-radio class="radio" v-model="listData.health" label="2" :disabled="forbidden">不合格</el-radio>
            </div>
          </li>
          <li>
            <span>健康证号码</span>
            <div class="froms">
              <input v-model="listData.healthCode" :disabled="forbidden">
            </div>
          </li>
          <li>
            <span>培训情况</span>
            <div class="froms">
              <el-select v-model="listData.training" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :disabled="forbidden">
                </el-option>
              </el-select>
            </div>
          </li>
          <li>
            <span>发证日期</span>
            <div class="froms">
              <el-input placeholder="请选择日期" icon="date" :disabled="true" v-model="listData.openDate" @click="openPickerdDate()" >
              </el-input>
              <mt-datetime-picker ref="picker" type="date" year-format="{value}年" month-format="{value} 月" date-format="{value} 日" v-model="pickerValue" @cancel="handleCanceDate" @confirm="handleConfirmDate"></mt-datetime-picker>
            </div>
          </li>
          <li>
            <span>到期日期</span>
            <div class="froms">
              <el-input v-model="listData.endDate" icon="date" disabled></el-input>
            </div>
          </li>
        </ul>
      </div>
  
    </main>
  </div>
</template>

<script>
  import {
    EnterprisePersonDetail,
    EnterprisePersonDelete,
    EnterprisePersonUpdate
  } from '../../api/api';
  import {
    DatetimePicker
  } from 'mint-ui';
  var moment = require('moment');
  export default {
    components: {
      'mt-datetime-picker': DatetimePicker,
    },
    data() {
      return {
        listData: {},
        show: false, //默认隐藏
        operation: true,
        save: false,
        forbidden: true,
        //参数
        options: [{
          value: '0',
          label: '未培训'
        }, {
          value: '1',
          label: '已培训'
        }],
        listData: [],
        dataValue: '',
        //组件
        pickerValue: moment().format('YYYY-MM-DD'), //获取当前时间 
        //表单
       
  
      };
    },
    methods: {
      update: function() {
        this.operation = false,
          this.save = true,
          this.show = false
        this.forbidden = false
      },
      //获取日期
      openPickerdDate() {
        this.$refs.picker.open();
      },
      handleCanceDate() {
        let _this = this
        _this.pickerValue = _this.listData.openDate
      },
      // 确定按钮 --- 判断该时间是否可选，若可选则把值赋给输入框的dataValue
      handleConfirmDate(val) {
        let _this = this
        _this.listData.openDate = moment(val).format('YYYY-MM-DD')
        _this.listData.endDate = moment(val).add("year", 1).format('YYYY-MM-DD 00:00:00')
      },
      //数据加载方法
      getData() {
        //定义需要传给通讯的参数： unid    
        let options = {
          params: {
            unid: this.$route.query.unid,
          }
        }
  
        //调取接口
        EnterprisePersonDetail(options).then((res) => {
          if (res.success === true) {
             this.listData = res.data;
             this.listData.health=JSON.stringify( this.listData.health);
             this.listData.training=JSON.stringify( this.listData.training);
          }
        })
      },
      //删除方法
      handleDelete() {
        let deletParams = {
          params: {
            unids: this.$route.query.unid,
          }
        }
        this.$confirm('是否删除此条信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          EnterprisePersonDelete(deletParams).then(() => {
            this.getData();
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.$router.go(-1);
          });
        });
      },
      //修改方法
      submitForm: function() {
        let varPictureFile = {
          FileName:""
        }
        let varEnterprise={
         Unid:JSON.parse(localStorage.getItem('auth')).enterpriseUnid,
        }
        let data = {
          Unid:this.$route.query.unid,
          Name:this.listData.name,
          Sex:this.listData.sex,
          PictureFile:varPictureFile,
          IndustryType:"",
          Health:this.listData.health,
          Training:this.listData.training,
          SerialNumber:this.listData.serialNumber,
          WorkType:this.listData.workType,
          IdCard:this.listData.idCard,
          Phone:this.listData.phone,
          Age:this.listData.age,
          HealthCode:this.listData.healthCode,
          OpenDate: moment(this.listData.dataValue).format('YYYY-MM-DD 00:00:00'),
          EndDate:this.listData.endDate,
          Enterprise:varEnterprise
        }
        let dataoption = {
          params: {
            Data: JSON.stringify(data),
            UserUnid: JSON.parse(localStorage.getItem('auth')).UserUnid,
           
          }
        }
        //调取接口
        EnterprisePersonUpdate(dataoption).then((res) => {
          if (res.success === true) {
            this.$message.success('保存成功');
            this.$router.go(-1);
          } else {
            this.$message.error(res.msg);
          }
        }).catch(function() {
          this.$message.error('网络异常。');
        })
      }
  
  
    },
    created() {
      this.getData();
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  em {
    width: 5px;
    display: -webkit-inline-box;
  }
 
</style>
